<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>修改个人信息</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
  }
  .container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }
  h1 {
    text-align: center;
    color: #333;
  }
  form {
    margin-top: 20px;
  }
  input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
  }
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  input[type="submit"]:hover {
    background-color: #0056b3;
  }
  .error-message {
    color: red;
    margin-bottom: 10px;
  }
</style>
<script>
function validateForm() {
    var gender = document.forms["profileForm"]["gender"].value;
    var age = parseInt(document.forms["profileForm"]["age"].value);
    var signature = document.forms["profileForm"]["signature"].value;
    var address = document.forms["profileForm"]["address"].value;
    var hobbies = document.forms["profileForm"]["hobbies"].value;

    var errorMessage = "";
    if (gender !== "男" && gender !== "女") {
        errorMessage += "性别必须为'男'或'女'\n";
    }
    if (isNaN(age) || age < 0 || age > 100) {
        errorMessage += "年龄必须在0到100之间\n";
    }
    if (address.length > 20) {
        errorMessage += "地址不能超过20个字符\n";
    }
    if (hobbies.length > 20|| signature.length > 20) {
        errorMessage += "爱好和个签不能超过20个字符\n";
    }

    if (errorMessage !== "") {
        alert(errorMessage);
        return false;
    }
}
</script>
</head>
<body>
<div class="container">
  <h1>修改个人信息</h1>
  <form name="profileForm" action="/update_profile/{{ username }}" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
    <a>姓名: {{ username }}</a>

    <p>性别:
        <label>
            <select name="gender">
                <option value="男" {{ 'selected' if user_info.gender == '男' else '' }}>男</option>
                <option value="女" {{ 'selected' if user_info.gender == '女' else '' }}>女</option>
            </select>
        </label>
    </p>
    <p>年龄: <label>
        <input type="number" name="age" value="{{ user_info.age }}">
    </label></p>
    <p>签名: <label>
        <input type="text" name="signature" value="{{ user_info.signature }}">
    </label></p>
    <p>地址: <label>
        <input type="text" name="address" value="{{ user_info.address }}">
    </label></p>
    <p>爱好: <label>
        <input type="text" name="hobbies" value="{{ user_info.hobbies }}">
    </label></p>
    <p>头像: <label>
        <input type="file" name="avatar" accept="image/*">
    </label></p>
    <input type="submit" value="Save">
</form>

</div>
</body>
</html>
